<template>
  <el-card shadow="never">
    <el-row justify="space-between">
      <el-col :span="18" :xs="24">
        <div class="flex h-full items-center">
          <img
            class="w-20 h-20 mr-5 rounded-full"
            :src="avatarUrl"
            alt="User Avatar"
          />
          <div>
            <p>{{ greetings }}</p>
            <p class="text-sm text-gray">
              今日天气晴朗，气温在15℃至25℃之间，东南风。
            </p>
          </div>
        </div>
      </el-col>

      <el-col :span="6" :xs="24">
        <div class="flex h-full items-center justify-around">
          <el-statistic :value="messageCount">
            <template #title>
              <div class="flex items-center">
                <svg-icon icon-class="message" size="20px" />
                <span class="text-[16px] ml-1">消息</span>
              </div>
            </template>
          </el-statistic>

          <el-statistic :value="todoCount">
            <template #title>
              <div class="flex items-center">
                <svg-icon icon-class="todolist" size="20px" />
                <span class="text-[16px] ml-1">待办</span>
              </div>
            </template>
            <template #suffix>/100</template>
          </el-statistic>

          <el-statistic :value="projectCount">
            <template #title>
              <div class="flex items-center">
                <svg-icon icon-class="project" size="20px" />
                <span class="text-[16px] ml-1">项目</span>
              </div>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    avatarUrl: {
      type: String,
      required: true,
      default: ''
    },
    greetings: {
      type: String,
      required: true,
      default: ''
    },
    messageCount: {
      type: Number,
      required: true,
      default: 0
    },
    todoCount: {
      type: Number,
      required: true,
      default: 0
    },
    projectCount: {
      type: Number,
      required: true,
      default: 0
    }
  }
}
</script>

<style scoped>
/* 这里可以添加组件的样式 */
</style>
